<template>
	<div class="index-container">
		<div class="shop-top">
			<div class="w1200">
				<div class="fr">
					<router-link :to="`/`" title="融易装">
						<i class="el-icon-house" style="margin-right:5px;"></i>返回商户后台
					</router-link>
				</div>
				<div class="fl">
					<div class="sn-quick-menu">
						<div class="login"><img v-if="info.logo" :src="info.logo.path"
								alt="">{{info.name?info.name:'暂未设置'}}<i class="el-icon-arrow-down el-icon--right"></i>
						</div>
						<!-- <div class="sp-cart">客服服务<i class="el-icon-arrow-down"></i></div> -->
					</div>
				</div>
			</div>
		</div>

		<div class="header">
			<div class="headerLayout w1200">
				<div class="headerCon">
					<h1 class="mallLogo">
						<router-link :to="`/shoplist`" title="融易装">
							<img src="../img/ryzLogo.png">
						</router-link>
					</h1>
					<!-- <div class="mallSearch">
						<form action="" class="layui-form" novalidate>
							<input type="text" v-model="keyword" class="layui-input" placeholder="搜索关键字">
							<button class="layui-btn" @click="filterPops()">
								<i class="el-icon-search"></i>
							</button>
						</form>
					</div> -->
				</div>
			</div>
		</div>

		<div class="content">
			<div class="main-nav">
				<div class="inner-cont0">
					<div class="inner-cont1 w1200">
						<div class="inner-cont2">
							<router-link :to="`/nowlist`" class="active">选材中心</router-link>
							<router-link :to="`/orderlist`">我的订单</router-link>
							<router-link :to="`/nowadderss`">地址管理</router-link>
							<router-link :to="`/nowcart`">购物车</router-link>
						</div>
					</div>
				</div>
			</div>
			<div class="category-con" style="width: 1200px;margin: auto; display: flex;">
				<div class="category-inner-con w1200">
					<div class="category-type">
						<h3>全部分类</h3>
					</div>
					<div class="category-tab-content">
						<div class="nav-con">
							<ul class="normal-nav layui-clear">
								<li class="nav-item" v-for="(item,index) in parentList" :key="index" v-if="index<12"
									@click=" tolist(item.cate_id)">
									<div class="title">{{item.cate_name}}</div>
									<i class="el-icon-arrow-right"></i>
								</li>
								<li class="navmore" @click="tolist()">
									<div class="title">查看更多</div>
									<i class="el-icon-arrow-right"></i>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<!-- banner -->
				<div class="category-banner">
					<div class="" style="width: 1020px; margin: auto;">
						<el-carousel  height="400px">
						      <el-carousel-item v-for="item in Banner" :key="item">
						        <img :src="item.img_url" style="width: 100%; height: 400px;">
						      </el-carousel-item>
						    </el-carousel>
						<!-- <img src="../img/banner1.jpg"> -->
					</div>
				</div>
			</div>
			<div class="floors">
				<div class="sk">
					<div class="sk_inner w1200">
						<div class="sk_hd">
							<a href="javascript:;">
								<img src="../img/s_img1.jpg">
							</a>
						</div>
						<div class="sk_bd">
							<div class="layui-carousel" id="test1">
								<el-carousel :interval="7000" arrow="always">
									<el-carousel-item class="item-box">
										<div class="item" v-for="(item,index) in topList" :key="index" v-if="index<4"
											@click="todeatil(item.id)">
											<router-link :to="{path:'/shopdeatil',query: {product_id:item.id}}"><img
													:src="item.main_imgurl"></router-link>
											<div class="title">{{item.product_title}}</div>
											<div class="price" v-if="item.rate_price">
												<span><i>底价 ￥</i>{{item.rate_price}}</span>
											</div>
											<div class="price">
												<del><i>售价 ￥</i>{{item.price}}</del><del
													style="padding-left:10px;"><i>原价 ￥</i>{{item.primary_price}}</del>
											</div>
										</div>
									</el-carousel-item>
									<el-carousel-item class="item-box">
										<div class="item" v-for="(item,index) in topList" :key="index" v-if="3<index<8"
											@click="todeatil(item.id)">
											<router-link :to="{path:'/shopdeatil',query: {product_id: item.id}}"><img
													:src="item.main_imgurl"></router-link>
											<div class="title">{{item.product_title}}</div>
											<div class="price" v-if="item.rate_price">
												<span><i>底价 ￥</i>{{item.rate_price}}</span>
											</div>
											<div class="price">
												<del><i>售价 ￥</i>{{item.price}}</del><del
													style="padding-left:10px;"><i>原价 ￥</i>{{item.primary_price}}</del>
											</div>
										</div>
									</el-carousel-item>
								</el-carousel>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="bList">
				<div class="w1200">
					<div class="blisttitle">推荐品牌 <span @click="toPages()">更多<i class="el-icon-arrow-right"></i></span>
					</div>
					<div class="i_bList">
						<div class="i_bItem" v-for="item in brandList" :key="item.store_id"
							@click="toPage(item.store_id)">
							<div class="i_topimg"
								:style="{
              background: 'url(https://cos.ryz1620.com/liankun/static/newHome/home2.png)','background-repeat': 'no-repeat','background-size': '100% 100%',}">

							</div>
							<div class="i_logo">
								<img :src="item.store_logo"></img>
							</div>
							<div class="i_bottom" style="height: 90rpx;">
								<div class="i_title">{{item.store_name}}</div>
								<div class="i_des">
									<text v-for="(itm, idx) in item.cate_lst" :key="idx"
										v-if="idx<3">{{itm.cate_name}}</text>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="banner">
				<div class="w1200">
					<img src="../img/12baner.png">
				</div>
			</div>

			<div class="product-list-box" id="product-list-box">
				<div class="product-list-cont w1200">
					<h4><img src="../img/title.png"></h4>
					<div class="product-item-box layui-clear">
						<div class="list-item" v-for="(item,index) in List" :key="index"
							@click="todeatil(item.product_id)">
							<router-link :to="{path:'/shopdeatil',query: {product_id: item.product_id}}"><img
									:src="item.main_imgurl"></router-link>
							<p>{{item.product_title}}</p>
							<div class="price" v-if="item.cost_price">
								<span><i>底价 ￥</i>{{item.cost_price}}</span>
							</div>
							<div class="price">
								<del><i>售价 ￥</i>{{item.price}}</del><del style="padding-left:10px;"><i>原价
										￥</i>{{item.primary_price}}</del>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>



		<div class="footer">
			<div class="ng-promise-box">
				<div class="ng-promise w1200">
					<p class="text">
						<a class="icon1" href="javascript:;">7天无理由退换货</a>
						<a class="icon2" href="javascript:;">送货上门</a>
						<a class="icon3" style="margin-right: 0" href="javascript:;">100%品质保证</a>
					</p>
				</div>
			</div>
			<div class="mod_help w1200">
				<!-- <p>
        <a href="javascript:;">关于我们</a>
        <span>|</span>
        <a href="javascript:;">帮助中心</a>
        <span>|</span>
        <a href="javascript:;">售后服务</a>
        <span>|</span>
        <a href="javascript:;">行业资讯</a>
        <span>|</span>
        <a href="javascript:;">关于货源</a>
      </p> -->
				<p class="coty">融易装版权所有 &copy; 2012-2020</p>
			</div>
		</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				name: '小刀',
				info: {},
				mobile: '',
				// 精选品牌
				brandList: [],
				parentList: [],
				topList: [],
				List: [],
				Banner:[],
				keyword:'',
			}
		},
		mounted() {
			this.info = JSON.parse(localStorage.getItem('info'))
			this.mobile = localStorage.getItem('mobile')
			this.getDatalist()
			this.getDatalists()
			this.getDatashop()
			this.getDataparent()
			this.getBanner()
		},
		methods: {
			toPage(id) {
				this.$router.push({
					name: 'shop',
					query: {
						id: id
					}
				})
			},
			toPages() {
				this.$router.push({
					name: 'shopnowlist',
					query: {}
				})
			},
			tolist(cate_id) {
				this.$router.push({
					name: 'nowlist',
					query: {
						cate_id: cate_id
					}
				})
			},
			todeatil(product_id) {
				this.$router.push({
					name: 'shopdeatil',
					query: {
						product_id: product_id
					}
				})
			},
			// 分类
			getDataparent() {
				this.$http.post('/api/admin/shopweb/cate/parent', {}).then(res => {
					if (res.code == 1) {
						this.parentList = res.data
						console.log(res.data)
					}
				})
			},
			// 精选商家
			getDatashop() {
				this.$http.post('/api/admin/shopweb/store/chosen', {}).then(res => {
					if (res.code == 1) {
						let brandList = res.data
						this.brandList = brandList
					}
				})
			},
			// 商品
			getDatalist() {
				this.$http.post('/api/admin/shopweb/product/lists', {
					page: 1,
					pagesize: 20
				}).then(res => {
					if (res.code == 1) {
						let List = res.data
						this.List = List.data
					}
				})
			},
			// 推荐商品
			getDatalists() {
				this.$http.post('/api/admin/shopweb/product/rec', {
					page: 1,
					pagesize: 20
				}).then(res => {
					if (res.code == 1) {
						this.topList = res.data
					}
				})
			},
			//banner
			getBanner() {
				this.$http.post('https://api.ryz1620.com/manager/shop/home/getBanner', {}).then(res => {
					if (res.code == 1) {
						this.Banner = res.data
					}
				})
			},
		}
	}
</script>
<style lang="less" scoped>
	& /deep/ .content {
		padding: 0 !important;
	}

	@import '../css/index.less';
</style>
<style>
  
</style>
